import Vector2 from "../global/Vector2"

const box = document.querySelector('#box') as HTMLDivElement
let lastMousePosition = new Vector2()

let flag = false
let areaType = ''
const mouse = new Vector2()
const mouseDown = (e: MouseEvent) => {
    flag = true
    const { clientX: x, clientY: y } = e
    lastMousePosition.set(x, y)
    try {
        areaType = e.target.getAttribute('active')
    changeCursor()

    } catch (error) {
        console.error(error)
    }

}
const mouseUp = () => {
    flag = false
    areaType = ''
    changeCursor()
}


const mouseMove = (e: MouseEvent) => {
    // 按下后，拖拽才有效
    if (flag) {
        // 鼠标位置
        const { clientX, clientY } = e;
        const mousePosition = new Vector2(clientX, clientY);
        // 鼠标与上一次记录的鼠标位置的差值
        let offset = new Vector2();
        mouse.copy(mousePosition)
        offset = offset.subVectors(mousePosition, lastMousePosition);
        changeBox(offset)
        // 将当前鼠标位置记录一下
        lastMousePosition = mouse.clone();
    }
}

const changeBox = (offset: Vector2) => {
    // 盒子的位置
    const { offsetLeft: boxX, offsetTop: boxY, clientWidth, clientHeight } = box
    const boxPosition = new Vector2(boxX, boxY)
    const boxSize = new Vector2(clientWidth, clientHeight)
    const styleInfo: BoxStyleInfo = {}
    if (areaType === 'box') {
        // 通过差值与盒子的位置，计算出盒子新的位置
        const LT = new Vector2().addVectors(offset, boxPosition)
        styleInfo.left = LT.x
        styleInfo.top = LT.y
    } else if (areaType === 'rb') {
        const size = new Vector2().addVectors(offset, boxSize)
        styleInfo.width = size.x
        styleInfo.height = size.y
    } else if (areaType === 'lt') {
        const pos = mouse.clone()
        styleInfo.left = pos.x
        styleInfo.top = pos.y
        const size = boxSize.clone().sub(offset)
        styleInfo.width = size.x
        styleInfo.height = size.y
    }
    else if (areaType === 'rt') {
        const top = boxPosition.y + offset.y
        styleInfo.top = top

        const width = boxSize.x + offset.x
        styleInfo.width = width

        const height = boxSize.y - offset.y
        styleInfo.height = height
    } else if (areaType === 'lb') {
        const height = boxSize.y + offset.y
        styleInfo.height = height

        const width = boxSize.x - offset.x
        styleInfo.width = width

        styleInfo.left = mouse.x

    }

    changeBoxStyle(styleInfo)
}

interface BoxStyleInfo {
    width?: number;
    height?: number;
    left?: number;
    top?: number;
}
const changeBoxStyle = (info: BoxStyleInfo) => {
    if (info.left !== undefined) box.style.left = info.left + 'px'
    if (info.top !== undefined) box.style.top = info.top + 'px'
    if (info.width !== undefined) box.style.width = info.width + 'px'
    if (info.height !== undefined) box.style.height = info.height + 'px'
}


enum MouseType {
    NWSE = 'nwse-resize',
    NESW = 'nesw-resize',
    EW = 'ew-resize',
    NS = 'ns-resize',
    MOVE = 'move',
    DEFAULT = 'auto',
}

const MouseTypeDisplay = {
    'lt': MouseType.NWSE,
    'lb': MouseType.NESW,
    'rt': MouseType.NESW,
    'rb': MouseType.NWSE,
    'box': MouseType.MOVE,
    default: MouseType.DEFAULT,
};

const changeCursor = () => {
    const cursor = MouseTypeDisplay[areaType || 'default'];
    document.body.style.cursor = cursor;
}



window.addEventListener('mousemove', mouseMove)
box.onmousedown = mouseDown
window.addEventListener('mouseup', mouseUp)